<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>教练</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <style>

        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    </style>


<body>
<div class="app" id="app">
    <el-row>
        <el-col :span="8" v-for="(item) in tableDate" :key="item.id" :offset="item > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '30px' }" style="margin-top:20px;margin-left: 20px;" class="animate__backInUp animate__animated">
                <div style="text-align:center;margin-top: 20px" >
                    <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div>
                    <el-descriptions title="教练信息" :column="1" border>
                        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
                            {{item.coach_name}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{item.coach_phone}}</el-descriptions-item>
                    </el-descriptions>
                    <el-button type="primary" round
                               :disabled="item.choose==='已被选择' ? true : false"
                               @click="addCourseToUser(item.id)" style="margin-top:40px;margin-left: 5%;width:300px;height:50px">WANTYOU</el-button>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script>


    new Vue({
        el: '#app',
        data:{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            size: 'medium',
            tableDate:[]
        },
        methods: {
            // 分页查询
            onQuerySubmit() {
                axios.get("${pageContext.request.contextPath}/course/queryCoach").then(response => {
                    if(response.data.code ===1){
                        console.log(response.data)
                        this.tableDate = response.data.data;
                    }
                })
            },
            addCourseToUser(id){
                axios.post("${pageContext.request.contextPath}/course/queryHasCoach").then(res=> {
                    if (res.data.code === 1) {
                        if (res.data.data === "have") {
                            this.$message({
                                type: 'warning',
                                message: '已选过教练!'
                            });
                        }else {
                            this.$confirm('此操作将选择教练, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                // 执行添加
                                let params = new URLSearchParams();
                                params.append('id', id);
                                axios.post("${pageContext.request.contextPath}/course/addCoachToUser",params).then(res=>{
                                    if(res.data.code===1){
                                        this.onQuerySubmit();
                                    }
                                })
                                this.$message({
                                    type: 'success',
                                    message: '选择成功!'
                                });
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消'
                                });
                            });
                        }
                    }})


            }
        },
        created() {
            this.onQuerySubmit();
        }
    })



</script>
</body>
</html>
